<extend name="Public:common" />
<block name="main">

<!-- banner -->
<div class="products-banner-mod">
    <div class="products-banner-inner"></div>
</div>

<!-- products tabs -->
<div class="products-main-mod">
  <div data-am-widget="tabs" class="am-tabs am-tabs-default products-tabs">
    <ul class="am-tabs-nav am-cf">
      <li class="am-active">
        <a href="[data-tab-panel-0]">适配工具</a>
      </li>
      <li class="">
        <a href="[data-tab-panel-1]">适配服务</a>
      </li>
      <li class="">
        <a href="[data-tab-panel-2]">Amaze UI</a>
      </li>
    </ul>
    <div class="am-tabs-bd">
      <div data-tab-panel-0 class="am-tab-panel am-active">
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <h2>所见即所得IDE工具，超强个性化订制</h2>
            <img src="__PUBLIC__/Home/images/products/manage_src_1.png" />
          </div>
        </div>
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <div class="am-u-md-5 sm-u-sm-12 products-pic">
              <img src="__PUBLIC__/Home/images/products/product-1-1.png" alt=""/>
            </div>
            <div class="am-u-md-6 am-u-sm-12 products-text">
              <h5>简单、易用</h5>
              <p>只需要懂得初级的HTML/CSS/JQuery，就可以使用专门针对移动网站设计的Amaze UI框架，轻松设计打造符合移动设计体验的跨屏网站</p>
            </div>
          </div>
        </div>
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <div class="am-u-md-5 sm-u-sm-12 products-pic">
              <img src="__PUBLIC__/Home/images/products/product-1-2.png" alt=""/>
            </div>
            <div class="am-u-md-6 am-u-sm-12 products-text">
              <h5>可视化操作</h5>
              <p>IDE提供所见即所得的模板设计工具，通过简单拖拽即可完成页面模板搭建</p>
            </div>
          </div>
        </div>
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <div class="am-u-md-5 sm-u-sm-12 products-pic">
              <img src="__PUBLIC__/Home/images/products/product-1-3.png" alt=""/>
            </div>
            <div class="am-u-md-6 am-u-sm-12 products-text">
              <h5>多层级</h5>
              <p>拥有通用模版一键适配，并提供快速适配、深度定制两种模式，用户既可以通过点选、拖拽，即可实现个性化风格的移动网站页面模板搭建，也可以通过编写代码的方式轻松设计打造出界面高度个性化的、带有交互功能、符合移动设计体验的跨屏网站</p>
            </div>
          </div>
        </div>
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <div class="am-u-md-5 sm-u-sm-12 products-pic">
              <img src="__PUBLIC__/Home/images/products/product-1-4.png" alt=""/>
            </div>
            <div class="am-u-md-6 am-u-sm-12 products-text">
              <h5>多设备同步编辑预览</h5>
              <p>云适配IDE支持多设备的模块、数据同步编辑，并通过简洁的预览界面，实现多平台、多设备预览</p>
            </div>
          </div>
        </div>
      </div>
      <div data-tab-panel-1 class="am-tab-panel ">
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <h2>清晰、完善的服务管理后台</h2>
            <img src="__PUBLIC__/Home/images/products/manage_src_2.png" />
          </div>
        </div>
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <div class="am-u-md-5 sm-u-sm-12 products-pic">
              <img src="__PUBLIC__/Home/images/products/product-2-1.png" alt=""/>
            </div>
            <div class="am-u-md-6 am-u-sm-12 products-text">
              <h5>统计服务</h5>
              <p>提供网站日均流量统计，并有移动/PC数据v对比；同时拥有移动营销数据统计，让你实时掌握网站营销动态，把握移动优化方向</p>
            </div>
          </div>
        </div>
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <div class="am-u-md-5 sm-u-sm-12 products-pic">
              <img src="__PUBLIC__/Home/images/products/product-2-2.png" alt=""/>
            </div>
            <div class="am-u-md-6 am-u-sm-12 products-text">
              <h5>优先获取百度轻直达号</h5>
              <p>作为百度直达号全国核心战略合作伙伴，一站式完成百度轻应用定制和直达号申请，不仅享受到移动跨屏适配的服务，还有百度大流量支持，帮助企业实现最大范围进行产品营销</p>
            </div>
          </div>
        </div>
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <div class="am-u-md-5 sm-u-sm-12 products-pic">
              <img src="__PUBLIC__/Home/images/products/product-2-3.png" alt=""/>
            </div>
            <div class="am-u-md-6 am-u-sm-12 products-text">
              <h5>云加速</h5>
              <p>全球独创的图片云端压缩技术，平均节省流量80%以上，下载速度提升5倍以上，多点CDN部署，使用户就近同步取得适配页面，加速网站响应，提高了用户访问体验和二次访问率</p>
            </div>
          </div>
        </div>
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <div class="am-u-md-5 sm-u-sm-12 products-pic">
              <img src="__PUBLIC__/Home/images/products/product-2-4.png" alt=""/>
            </div>
            <div class="am-u-md-6 am-u-sm-12 products-text">
              h5>快速拥有原生APP</h5>
              <p>无需单独开发，仅需简单设置，云适配网站经技术封装成为APP产品，可在Market进行同步推广。 同时用户可将云适配网站随时以APP图标形式保存在手机桌面，方便多次浏览，提高信息的刺激强度，促进会员快速交易</p>
            </div>
          </div>
        </div>
      </div>
      <div data-tab-panel-2 class="am-tab-panel ">
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <h2>Amaze UI中国首个开源HTML5跨屏前端框架</h2>
            <img src="__PUBLIC__/Home/images/products/manage_src_3.png" />
          </div>
        </div>
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <div class="am-u-md-5 sm-u-sm-12 products-pic">
              <img src="__PUBLIC__/Home/images/products/product-3-1.png" alt=""/>
            </div>
            <div class="am-u-md-6 am-u-sm-12 products-text">
              <h5>国内首款跨屏框架</h5>
              <p>Amaze 是国内首款推出的可支持多设备、多平台的跨屏前端框架</p>
            </div>
          </div>
        </div>
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <div class="am-u-md-5 sm-u-sm-12 products-pic">
              <img src="__PUBLIC__/Home/images/products/product-3-2.png" alt=""/>
            </div>
            <div class="am-u-md-6 am-u-sm-12 products-text">
              <h5>Mobile first  移动优先</h5>
              <p>Amaze始终保持其 Mobile first 的理念。专注于最重要的内容和交互，适应移动互联网潮流</p>
            </div>
          </div>
        </div>
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <div class="am-u-md-5 sm-u-sm-12 products-pic">
              <img src="__PUBLIC__/Home/images/products/product-3-3.png" alt=""/>
            </div>
            <div class="am-u-md-6 am-u-sm-12 products-text">
              <h5>丰富的Web组件</h5>
              <p>Amaze中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个界面出色、功能完备、体验优秀的跨屏网站</p>
            </div>
          </div>
        </div>
        <div class="products-item-wrap">
          <div class="am-container products-item">
            <div class="am-u-md-5 sm-u-sm-12 products-pic">
              <img src="__PUBLIC__/Home/images/products/product-3-4.png" alt=""/>
            </div>
            <div class="am-u-md-6 am-u-sm-12 products-text">
              <h5>定制自己的框架代码</h5>
              <p>Amaze UI因为可拓展的结构设计，用户可以轻松的对其中的HTML/CSS进行修改，依据自己的需求裁剪代码，从而定制属于自己的框架代码</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</block>